<template>
	<view>
		<div class="zs"></div>
		<div class="header" :style="'height: '+(menuClint.top + menuClint.height +10)+'px'">
			<div class="fun" @click="toggle('left')"
				:style="'top: '+(menuClint.top+2)+'px;height:'+(menuClint.height)+'px;right:'+(menuClint.right - menuClint.height)+'px;width:'+(menuClint.height)+'px'">
				<uni-icons type="bars" color="#fff" size="25"></uni-icons>
			</div>
			<image :style="'margin-top: '+(menuClint.top)+'px;height:'+(menuClint.height)+'px;'" mode="heightFix"
				class="logo" src="../../static/aslogo.png" alt="" srcset=""></image>
		</div>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				topBar: uni.getSystemInfoSync().statusBarHeight + 10,
				// 获取菜单按钮（右上角胶囊按钮）的布局位置信息
				menuClint: uni.getMenuButtonBoundingClientRect(),
			}
		},
		onLoad() {

		},
		methods: {
			toggle(type) {
				this.$emit("open", type)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes mymove {

		0% {
			background-position: 100% 100%;
		}

		20% {
			background-position: 20% 20%;
		}

		40% {
			background-position: 40% 40%;
		}

		60% {
			background-position: 60% 60%;
		}

		80% {
			background-position: 80% 80%;
		}

		100% {
			background-position: 100% 100%;
		}
	}

	.header {
		// background: #055EFA;

		text-align: center;
	}

	.zs {
		position: absolute;
		z-index: -1;
		top: -20vh;
		left: -100px;
		width: calc(100vw + 200px);
		height: 60vh;
		animation: mymove 3s infinite;
		animation-direction: alternate;
		background: linear-gradient(-45deg, #4b84ff, #055bfa);
		background-size: 500% 500%;
		filter: blur(100px);
	}

	.fun {
		position: absolute;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;

		&:active {
			background: rgba(0, 0, 0, 0.1);
		}
	}

	.logo {
		height: 90px;
	}
</style>
